<template>
	<view>
		<view class="myform">
			<view class="" v-if="form.step==2">
				<view class="bt">
					忘记密码
				</view>
				<view class="huis ">
					已向您的手机{{form.phone.slice(-4)}}发送验证码
				</view>
				<view class="myinput btx">
					<input class="uni-input dhuis_b" v-model="form.smscode" @input="checkSms"  name="smscode" placeholder="验证码" />
				</view>
				<view class="center sendsmd" v-if="showSecond">
					{{second}}秒
				</view>
				<view class="center sendsmd" v-else @click="sendSms">
					重新发送
				</view>
				<view class="btn">
					<button @click="smsNext" :disabled="disabled2" class="mybtn" :class="{mhs_bg_active:!disabled2,wjh_btn:disabled2}">下一步</button>
				</view>
				<view class="reg_forget">
					<view class="" @click="back_login">
						账号密码登录
					</view>
				</view>
			</view>
			<view class="" v-else-if="form.step==3">
				<view class="bt">
					设置您的新密码
				</view>
				<form @submit="smsSetPw" class="">
					<view class="myinput btx">
						<input class="uni-input dhuis_b" v-model="form.password" @input="checkform"  name="password" placeholder="新密码" />
					</view>
					<view class="btn">
						<button form-type="submit" :disabled="disabled3" class="mybtn" :class="{mhs_bg_active:!disabled3,wjh_btn:disabled3}">提交</button>
					</view>
				</form>
				<view class="reg_forget">
					<view class="" @click="back_login">
						账号密码登录
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="bt">
					忘记密码
				</view>
				
				<form @submit="sendSms" class="">
					<view class="myinput btx">
						<input class="uni-input dhuis_b" v-model="form.phone" @input="checkPhone" name="phone" placeholder="手机号" />
					</view>
					<view class="btn">
						<button form-type="submit" :disabled="disabled1" class="mybtn" :class="{mhs_bg_active:!disabled1,wjh_btn:disabled1}">下一步</button>
					</view>
				</form>
				
				<view class="reg_forget">
					<view class="" @click="back_login">
						账号密码登录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{step:1,phone:'',smscode:'',password:''},
				disabled1:true,
				disabled2:true,
				disabled3:true,
				second:0,
				showSecond:true,
			}
		},
		methods: {
			checkform(){
				if(!(this.func.empty(this.form.smscode)) && !(this.func.empty(this.form.phone)) && !(this.func.empty(this.form.password))){
					this.disabled3=false;
				}else{
					this.disabled3=true;
				}
			},
			checkSms(){
				if(!(this.func.empty(this.form.smscode))){
					this.disabled2=false;
				}else{
					this.disabled2=true;
				}
			},
			checkPhone(){
				if(this.func.is_phone(this.form.phone)){
					this.disabled1=false;
				}else{
					this.disabled1=true;
				}
			},
			getCode(){
			   this.showSecond = true;
			   this.second=120;
			   var interval = setInterval(() => {
				  --this.second;
				  if(this.second==0){
					  clearInterval(interval);
					  this.showSecond = false;
				  }
			   }, 1000);
			},
			sendSms() {
				this.getCode();
				var formdata = {};
				formdata.phone = this.form.phone;
				this.api.request({url:'/api/common/sms',method:'GET',formdata:formdata,
				}).then(res=>{
					console.log(res);
					if(res.code==1002){
						this.form.step=2;
					}else{
						uni.showToast({
							title:res.msg,
							duration: 4000,
							icon: "none"
						})
					}
				});
			},
			smsNext(){
				this.form.step=3;
			},
			smsSetPw: function(e) {
				var formdata = e.detail.value;
				formdata.phone = this.form.phone;
				formdata.smscode = this.form.smscode;
				this.api.request({url:'/api/v1/user/smspw',method:'POST',formdata:formdata,
				}).then(res=>{
					if(res.code==641){
						this.api.login(res.data);
						uni.switchTab({
						    url: '/pages/my/my'
						});
					}else{
						uni.showToast({
							title:res.msg,
							duration: 4000,
							icon: "none"
						})
					}
				});
			},
			back_login(){
				uni.switchTab({
				    url: '/pages/my/my'
				});
			}
		},
		onLoad() {
			this.api.islogin();
		}
	}
</script>

<style>
@import url("my.css");
page{background: #FFFFFF;}
.sendsmd{margin: 20rpx 0;}
</style>
